<!-- @format -->

<template>
    <div class="ma-content-block  p-4" style="height: 88vh">
		<div class="flex">
            <a-tooltip content="请输入运单号">
                <a-input v-model="form.yundanhao" placeholder="请输入运单号" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
            </a-tooltip>
            <a-tooltip content="请选择公司名称">
                <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.dept_id" :filter-option="filterOption" :options="dept_list" :field-names="{ label: 'name', value: 'id' }" allow-clear allow-search
                        placeholder="请选择公司名称" />
            </a-tooltip>
            
            <a-tooltip content="请输入品名名称">
                <a-input v-model="form.goods_name" placeholder="请输入品名名称" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
            </a-tooltip>
            <!-- <a-tooltip content="请选择发运">
                <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.fa_id" :options="fadaoList"  allow-clear allow-search
                        placeholder="请选择发运" />
            </a-tooltip> -->
            <a-tooltip content="请选择运输方式">
                <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.transport_type" :options="transportList" :field-names="{ label: 'title', value: 'key' }" allow-clear allow-search
                        placeholder="请选择运输方式" />
            </a-tooltip>
            
            <a-tooltip content="请输入车号">
                <a-input v-model="form.car_no" placeholder="请输入车号" allow-clear style="width:calc((100% - 64px) / 5);margin-bottom:16px" />
            </a-tooltip>
            
        </div>
        <div class="flex">
            <!-- <a-tooltip content="请选择运输方式">
                <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.transport_type" :options="transportList" :field-names="{ label: 'title', value: 'key' }" allow-clear allow-search
                        placeholder="请选择运输方式" />
            </a-tooltip> -->
            <!-- <a-tooltip content="请选择配送人">
                <a-select style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" v-model="form.peisong_id" :options="transportList" :field-names="{ label: 'title', value: 'key' }" allow-clear allow-search
                        placeholder="请选择配送人" />
            </a-tooltip> -->
            <a-tooltip content="请输入箱号">
                <a-input v-model="form.box" placeholder="请输入箱号" allow-clear style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px" />
            </a-tooltip>
            <a-tooltip content="请选择办理时间">
                <a-range-picker
                    v-model="form.process_time"
                    :time-picker-props="{ defaultValue: ['00:00:00','23:59:59'] }"
                    allow-clear
                    showTime
                    style="width:calc((100% - 64px) / 5);margin-bottom:16px;margin-right:16px;"
                />
            </a-tooltip>
            <a-tooltip content="请选择到达时间">
                <a-range-picker
                    v-model="form.come_time"
                    :time-picker-props="{ defaultValue: ['00:00:00','23:59:59'] }"
                    allow-clear
                    showTime
                    style="width:calc((100% - 64px) / 5);margin-bottom:16px;margin-right:16px;"
                />
            </a-tooltip>
            <a-tooltip content="请选择支付时间">
                <a-range-picker
                    v-model="form.pay_date"
                    allow-clear
                    showTime
                    style="width:calc((100% - 64px) / 5);margin-right:16px;margin-bottom:16px"
                />
            </a-tooltip>
            <div class='flex'>
                <a-button type="primary"  @click="handleSearch" style="margin-right:16px">搜索</a-button>
                <a-button  @click="handleResetting" style="margin-right:16px">重置</a-button>
                <a-button type="primary"  @click="handleExports"> 导出</a-button>
            </div>
        </div>
        <div class="flex" style="margin-bottom: 16px;">
            <div style="margin-right: 48px;" v-for="(item,index) in price_list" :key="index">{{ item.type_name }}：{{(item.money - 0).toFixed(2)}}元</div>
        </div>
        <a-table summary-text="合计" summary
        ref="exportTableRef" :columns="columns"
        :column-resizable="true" :data="tableData" :scroll="{x:2000, y:600 }"
        :table-layout-fixed="true" :bordered="{wrapper: true, cell: true}" :pagination="false"
            >
            <template #car_no="{record}">
                <div>{{ record.car_type + '  '}}{{ record.car_no }}</div>
            </template>
            <!-- <template #transport_type="{record}">
                <div>{{ record.transport_type == 1?'集装箱':'整车' }}</div>
            </template> -->
            <template #pay_type="{record}">
                <a-tooltip :content="record.now_pay_type == 1?'现结-惠支付':record.now_pay_type == 2?'现结-现金':record.now_pay_type == 3?'现结-对公转账':record.now_pay_type == 4?'现结-微信支付':''">
					<div v-if="record.pay_type == '现结'">{{ record.now_pay_type == 1?'现结-惠支付':record.now_pay_type == 2?'现结-现金':record.now_pay_type == 3?'现结-对公转账':record.now_pay_type == 4?'现结-微信支付':'' }}</div>
				</a-tooltip>
                <div v-if="record.pay_type == ''"></div>
                <div v-if="record.pay_type != '' && record.pay_type != '现结'">{{ record.pay_type }}</div>
            </template>
            <template #summary-cell="{ column, record }">
                <div v-if="column.dataIndex == 'xuhao'">合计</div>
                <div v-if="column.dataIndex == 'number'">{{record[column.dataIndex]}} 件</div>
                <div v-if="column.dataIndex == 'total_price'">{{(record[column.dataIndex] - 0).toFixed(2)}} 元</div>
                <div v-for="(item,index) in 26" :key="index" >
                    <div v-if="column.dataIndex == 'price_type_' + item"> {{(record[column.dataIndex] - 0).toFixed(2)}}</div>
                    <!-- {{(record[column.dataIndex] - 0).toFixed(2)}} 元 -->
                    
                </div>
                <!-- {{
                    column.dataIndex == "xuhao" ? "合计" :
                    column.dataIndex == "number"  ? record[column.dataIndex] + '件' :
                    column.dataIndex == "total_price"  ? (record[column.dataIndex] - 0).toFixed(2) + '元' :
                    ''
                }} -->
            </template>
        </a-table>

        <div style="padding-bottom: 2%"></div>
        <!-- 加载中... -->
        <div
            v-if="loading"
            style="
            position: fixed;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            display: flex;
            top: 0;
            left: 0;
            justify-content: center;
            align-items: center;
            "
        >
            <a-spin dot :size="10" />
        </div>
        
    </div>
</template>
<script setup>
import { ref, reactive, onMounted,onActivated } from "vue";
import { request } from "@/utils/request.js";
import { Message } from "@arco-design/web-vue";
import { Notification } from "@arco-design/web-vue";
import {dateFormat} from '@/utils/util.js'
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
import { ElMapExportTable } from "table-excel";

import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
import { useRouter } from 'vue-router'
import { pinyin } from "pinyin-pro"
const router = useRouter()

const loading = ref(false)
const fadaoList = ref([
    {key:1,value:'集装箱'},
    {key:2,value:'整车'},
    
])
const transportList = ref()
const newDate = new Date();
// 当天
const newDay = newDate.getDate();  
// 当年
const newYear = newDate.getFullYear();
// 当月
const newMonth = (newDate.getMonth() + 1)>9?(newDate.getMonth() + 1):'0' + (newDate.getMonth() + 1);
// 本月天数
const newMaxDay = new Date(newYear, newMonth, 0).getDate();
const price_typeList = ([])
const tableData = ref([])
const dept_list = ref([])
const exportData = ref([])
const price_list = ref([])
const filterOption = (v,option)=>{
  return option.keywords.some(keywords=>keywords.includes(v))
}
const payTypeList = ref([
    {
        title:'预付款',
        value:'money'
    },
    {
        title:'周期结算',
        value:'periodic'
    },
    {
        title:'现结',
        value:'now_pay'
    },
])

const tableColumns = ref([
    {title:`${newYear}年${newMonth}月${newDay}日`,children:[
        {title:'序号',dataIndex:'xuhao'},
        {title:'运单号',dataIndex:'yundanhao'},
        {title:'办理时间',dataIndex:'process_time'},
        {title:'到达时间',dataIndex:'come_time'},
        {title:'客户名称',dataIndex:'dept_name'},
        {title:'车号',dataIndex:'car_no'},
        {title:'原票号',dataIndex:'ticket_number'},
        {title:'集装箱',dataIndex:'box'},
        {title:'品名',dataIndex:'goods_name'},
        {title:'到站类型',dataIndex:'is_car'},
        {title:'运输方式',dataIndex:'transport_type'},
        {title:'发站',dataIndex:'producer'},
        {title:'到站',dataIndex:'come_address'},
        {title:'件数',dataIndex:'number'},
        {title:'标重',dataIndex:'bz_weight'},
        {title:'货重',dataIndex:'hz_weight'},
        {title:'计费重量',dataIndex:'jf_weight'},
        {title:'承运人重量',dataIndex:'cyr_weight'},
        {title:'收款方式',dataIndex:'pay_type'},
        {title:'支付时间',dataIndex:'pay_date'},
        {title:'合计金额',dataIndex:'total_price'},
    ]}
    
])
const form = ref({
    dept_name:'',   // 货主名称
    dept_id:'',
    goods_name:'',   // 品名
    box:'',   // 集装箱
    car_no:'',   // 车号
    yundanhao:'',
    // process_time:[`${newYear}-${newMonth}-${newDay} 00:00:00`,`${newYear}-${newMonth}-${newDay} 23:59:59`],   // 办理时间
    process_time:[],   // 办理时间
    // fa_id:'',  // 发运
    // peisong_id:'',  // 配送人
    transport_type:'',   // 运输方式
    // come_time:[`2025-03-01 00:00:00`,`2025-03-02 23:59:59`],   // 到达时间
    come_time:[],   // 到达时间
    pay_date:[tool.dateFormat(
          Math.round(new Date().getTime() / 1000).toString(),
          "yyyy-MM-dd"
        ) + " 00:00:00",tool.dateFormat(
          Math.round(new Date().getTime() / 1000).toString(),
          "yyyy-MM-dd"
        ) + ` 23:59:59`],   // 支付时间
})

const handlePayType = (e) => {
    let name = ''
    payTypeList.value.map((v,i)=>{
        if(v.value == e){
            name = v.title
        }
    })
    
    return name
}
const handleExports = ()=> {
      const instance = new ElMapExportTable(
        {
            column:tableColumns.value,
            data:exportData.value,
            setRowStyle({ data, columnIndex, rowIndex, type }) {
            if (type === "main") {
              return {
                height: 40,
              };
            }
          },
        },
        // {progress: progress => console.log(progress)}
      );
      instance.download("威斯腾每日交接报表");
}
const handleSearch = ()=>{
    handleDataList()
}
const handleResetting = ()=>{
    form.value = {
        dept_name:'',   // 货主名称
        dept_id:'',
        goods_name:'',   // 品名
        box:'',   // 集装箱
        car_no:'',   // 车号
        yundanhao:'',
        // fa_id:'',  // 发运
        // peisong_id:'',  // 配送人
        transport_type:'',   // 运输方式
        come_time:[],   // 到达时间
        pay_date:[],   // 支付时间
        process_time:[],   // 办理时间
    }
    handleDataList()
}
const handleDeptList = ()=>{
    request({
        url: 'system/dept/remote',
        method: 'post',
        data: {
        openPage: false,
        remoteOption: {
            filter: {
            type: ['=', 2],
            status: ['=',1]
            },
            select: ["id", "name"],
            sort: { id: "desc" }
        }
        }
    }).then(res => {
        res.data.map((v,i)=>{
                v.keywords = [
                v.name,
                pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
                pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
                ]
        })
        dept_list.value = res.data
    })
}
onMounted(()=>{
    commonApi.getDict("price_type").then((res) => {
        price_typeList.value = res.data;
        let arr = []
        res.data.map((v,i)=>{
            arr.push({title:v.title,dataIndex:'price_type_' + v.key,width:100,headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },})
        })
        tableColumns.value[0].children.splice(-3,0,...arr)
        columns.value.splice(-3,0,...arr)
        console.log(tableColumns.value)
    });
    commonApi.getDict("transport_type").then((res) => {
        transportList.value = res.data;
        console.log(transportList.value)
    });
    handleDeptList()
    handleDataList()
    console.log("form:",form.value)
})
onActivated(()=>{
    handleDataList()
})
const handleDataList = (obj)=>{   // 获取台账数据
        loading.value = true
        
        request({
            url:'/prediction/Tz/dayoverdata',
            method: 'get',
            params:form.value,
        }).then(res=>{
            let _data = res.data.data
            price_list.value = res.data.price_list
            _data.map((v,i)=>{
                v.xuhao = i + 1
                v.total_price = v.total_price - 0
                for(let j = 1;j<= 26;j++){
                  v['price_type_' + j] = v['price_type_' + j] - 0
                }
            })
            _data.map((v,i)=>{
                v.transport_type = v.transport_type == 1?'集装箱':v.transport_type == 2?'整车':'批量零散'
                v.pay_type = handlePayType(v.pay_type)
            })
            tableData.value = _data
            let hejiObj = {
                xuhao:'合计',
                yundanhao:'',
                process_time:'',
                come_time:"",
                dept_name:'',
                car_no:'',
                ticket_number:'',
                box:'',
                goods_name:'',
                is_car:'',
                transport_type:'',
                producer:'',
                come_address:'',
                number:'',
                bz_weight:'',
                hz_weight:'',
                jf_weight:'',
                cyr_weight:'',
                pay_type:'',
                pay_date:'',
                total_price:0,
            }
            for(let j = 1;j<= 26;j++){
                hejiObj['price_type_' + j] = 0
            }
            console.log("hejiObj:",hejiObj)
            exportData.value = JSON.parse(JSON.stringify(_data))
            exportData.value.map((v,i)=>{
                if(v.pay_type == '现结'){
                    v.pay_type = v.now_pay_type == 1?'现结-惠支付':v.now_pay_type == 2?'现结-现金':v.now_pay_type == 3?'现结-对公转账':v.now_pay_type == 4?'现结-微信支付':''
                }
                v.car_no = v.car_type +' ' + v.car_no
                for(let j = 1;j<= 26;j++){
                    hejiObj['price_type_' + j] += (v['price_type_' + j] - 0)
                }
                hejiObj.total_price += (v.total_price - 0)
            })
            exportData.value.push(hejiObj)
            setTimeout(() => {
                loading.value = false
            }, 1000)
        }).catch(rej=>{
            loading.value = false
        })
}
const columns = ref([
    {
        title: '序号',
        dataIndex: 'xuhao',
        width:70,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        fixed:'left'
    },
    {
        title: '运单号',
        dataIndex: 'yundanhao',
        width:160,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        fixed:'left'
    },
    {
        title: '办理时间',
        dataIndex: 'process_time',
        width:160,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        fixed:'left'
    },
    {
        title: '到达时间',
        dataIndex: 'come_time',
        width:160,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        fixed:'left'
    },
    {
        title: '客户名称',
        dataIndex: 'dept_name',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        slotName:'dept_name',
        fixed:'left'
    },
    
    {
        title: '车号',
        dataIndex: 'car_no',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        slotName:'car_no',
    },
    {
        title: '原票号',
        dataIndex: 'ticket_number',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '箱号',
        dataIndex: 'box',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '品名',
        dataIndex: 'goods_name',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '到站类型',
        dataIndex: 'is_car',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '运输方式',
        dataIndex: 'transport_type',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        slotName:'transport_type',
    },
    {
        title: '发站',
        dataIndex: 'producer',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '到站',
        dataIndex: 'come_address',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '件数',
        dataIndex: 'number',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    
    {
        title: '标重',
        dataIndex: 'bz_weight',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '货重',
        dataIndex: 'hz_weight',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '计费重量',
        dataIndex: 'jf_weight',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '承运人重量',
        dataIndex: 'cyr_weight',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '收款方式',
        dataIndex: 'pay_type',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
        slotName:'pay_type',
    },
    
    {
        title: '支付时间',
        dataIndex: 'pay_date',
        width:160,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    {
        title: '合计金额',
        dataIndex: 'total_price',
        width:120,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'rgba(46,87,170,1)',
            color:'#fff'
        },
    },
    
])

</script>
<style>

</style>
<script>

export default { name: "ledger:dailyHandover" };
</script>
